<template>
<div class="Home">
    <el-container>
        <el-header>
            <ShowMenuTop @openGetUserInfo="UserInfoFormVisible" :ShowTopMenu="ShowTopMenu"></ShowMenuTop>
        </el-header>
        <el-container>
            <el-aside width="auto" v-if="isHidden">
                <SideOnLeft :SideMenu="localSideMenu()"></SideOnLeft>
            </el-aside>
            <el-main>
                <transition-group name="breadcrumb">
                    <Breadcrumb :key="key" v-if="isHidden"></Breadcrumb>
                </transition-group>
                <transition name="fade-transform" mode="out-in">
                    <router-view :key="key"></router-view>
                </transition>
            </el-main>
        </el-container>
    </el-container>
</div>
</template>

<script>
import ShowMenuTop from "./ShowMenuTop/ShowOnTop";
import SideOnLeft from "./SideMenuLeft/SideOnLeft";
import Breadcrumb from "@/components/Breadcrumb/Breadcrumb.vue";
import {
    mapGetters
} from "vuex";
import {
    mapState
} from "vuex";
export default {
    data() {
        return {
            filterShowTopMenus: []
        }
    },
    components: {
        SideOnLeft,
        ShowMenuTop,
        Breadcrumb
    },
    computed: {
        showRouteArray() {
            return this.$store.state.User.router.menus
        },
        ...mapGetters({
            ShowTopMenu: "ShowMenu/filterChildrenRouter",
        }),
        ...mapState({
            SideMenu: (state) => {
                return state.ShowMenu.SideMenu;
            },
        }),
        key() {
            return this.$route.path;
        },
    },
    data() {
        return {
            isHidden: false
        };
    },
    methods: {
        filterShowTopMenu() {
            this.filterShowTopMenus = this.ShowTopMenu.filter((item) => {
                if (this.showRouteArray.join(',').indexOf(item.name) != -1) {
                    return item
                }
                // return item.meta.roles.includes(userInfo.userLevel);
            });
        },
        UserInfoFormVisible() {

        },
        localSideMenu() {
            return JSON.parse(localStorage.getItem("ShowMenu/setSideMenu")).children;
        },
        SideMenuShow() {
            return this.SideMenu;
        },
        isSideHidden() {
            let setSideMenu = JSON.parse(localStorage.getItem('ShowMenu/setSideMenu'))
            if (setSideMenu) {
                if (setSideMenu.path) {
                    this.isHidden = true;
                }
                if (setSideMenu.path === '/Help') {
                    this.isHidden = false;
                }
                if (setSideMenu.path === '/Map') {
                    this.isHidden = false;
                }
                if (setSideMenu.path === '/supermap') {
                    this.isHidden = false;
                }
            } else {
                this.isHidden = false;
            }

            return this.isHidden;
        },
    },
    created() {
        this.isSideHidden();
        this.filterShowTopMenu()
    },
    watch: {
        $route() {
            this.isSideHidden();
            this.filterShowTopMenu()
        },
    },
};
</script>

<style lang="scss">
.Home {
    .el-header {
        padding: 0;
    }

    .el-main {
        padding: 0;
        position: relative;
        height: calc(100vh - 60px);

        width:calc(100% - 300px) .main {
            padding: 0 0 0 0;
            box-sizing: border-box;
        }
    }

    .el-aside {
        height: calc(100vh - 60px);
        background: #fff;
        border: none;
        border-right: 1px solid #ddd;
        overflow: scroll;

        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
}
</style>
